<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./css/login.css" />
  <title>Document</title>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
</head>

<body>
  <div class="loginContainer" id="app">
    <h1>登录</h1>
    <form action="./checkUser.php" onsubmit="return false" method="post">姓名：
      <input v-model="username" class="inputStyle1 inputStyle username" type="text" name="username" />
      <span class="exchange">用户名不正确</span>
      <br />密码：
      <input v-model="pwd" class="inputStyle pwd" type="password" name="pwd" /><br />
      记住我 <input type="checkbox" class="remeber" />
      <input @click="sub" class="loginStyle" type="submit" value="登录" />
      <button @click="changeCart">点击我修改购物车数据</button>
    </form>
  </div>
</body>
<script>
  // console.log(axios);
  Vue.prototype.$http = axios;

  new Vue({
    el: "#app",
    data: {
      username: "",
      pwd: ""
    },
    methods: {
      async sub() {
        let { data } = await this.$http({
          url: "/checkUser",
          method: "post",
          data: {
            username: this.username,
            pwd: this.pwd
          }
        })
        // console.log(data);
        let token = data.token;
        localStorage.setItem("token", token)
      },
      async changeCart() {
        // 需要把token携带到服务端，需要把token加入到 请求头部里
        let { data } = await this.$http({
            method:"get",
            url:"/getdata",
            headers:{
                "Authorization":"Bearer "+localStorage.getItem("token")
            }
        });
        console.log(data);
      }
    }
  })


</script>

</html>